<% with_cover_image ||= true %>
<% object ||= product %>
<% if object.default_image.present? && object.default_image.attached? %>
  <% height ||= theme_setting('product_listing_image_height') %>
  <% width ||= theme_setting('product_listing_image_width') %>
  <figure class="group <%= 'aspect-1' if height == width %> card-product-featured-images-container bg-transparent h-full">
    <% if with_cover_image %>
      <% object_class = 'object-cover object-center' %>
    <% else %>
      <% object_class = 'object-contain object-top' %>
    <% end %>
    <% image_hover_class = object.secondary_image.present? && object.secondary_image.attached? ? 
         "w-full group-hover:opacity-0 transition-opacity duration-500 z-10 relative h-full bg-background product-card !max-h-full #{object_class}" :
         "w-full h-full !max-h-full #{object_class}" %>
    <%= spree_image_tag(object.default_image, width: width, height: height, variant: :medium, loading: :lazy, alt: "#{object.name} #{Spree.t('storefront.products.primary_image', default: 'primary image')}", class: image_hover_class) %>
    <% if object.secondary_image.present? && object.secondary_image.attached? %>
      <% secondary_image_class = "w-full absolute top-0 left-0 opacity-100 h-full !max-h-full #{object_class}" %>
      <%= spree_image_tag(object.secondary_image, width: width, height: height, variant: :medium, loading: :lazy, alt: "#{object.name} #{Spree.t('storefront.products.secondary_image', default: 'secondary image')}", class: secondary_image_class) %>
    <% end %>
  </figure>
<% else %>
  <div class="w-full aspect-1 bg-accent"></div>
<% end %>
